<template>
  <!-- 标本闭环 -->
  <div id="criticalValue">
    <Breadcrumb content="标本闭环" />
    <div class="specclosedloop">
      <FlowStepComp :tabs="processTabs" style="width: 100%" @itemClick="itemClick" />
    </div>
    <VueFlow class="my-flow" v-model:nodes="nodes" v-model:edges="edges"></VueFlow>
    <VueFlow class="my-flow" :nodes="nodes" :edges="edges">
      <!-- bind your custom node type to a component by using slots, slot names are always `node-<type>` -->
      <template #node-special="specialNodeProps">
        <SpecialNode v-bind="specialNodeProps" />
      </template>

      <!-- bind your custom edge type to a component by using slots, slot names are always `edge-<type>` -->
      <template #edge-special="specialEdgeProps">
        <SpecialEdge v-bind="specialEdgeProps" />
      </template>
    </VueFlow>
  </div>
</template>
<script lang="ts" setup>
import Breadcrumb from '@/components/Breadcrumb.vue';
import { reactive, ref, defineExpose, getCurrentInstance, onMounted } from 'vue';
import { IsEmpty, sortByField, formatDateTime } from '@/utils/common';
import { VxeMessage, VxeNotifyType } from "@/utils/CommonMessage";
import { AppStore } from '@/stores/store';
import FlowStepComp from '@/components/FlowStepComp.vue';
import type { Node, Edge } from '@vue-flow/core';
import { VueFlow } from '@vue-flow/core';

let store = AppStore();
let { proxy }: any = getCurrentInstance();
let loading = ref(false);
let processTabs = reactive([{ nodeDictName: '申请', isActive: false }, { nodeDictName: '采样', isActive: false }, { nodeDictName: '签收', isActive: false }, { nodeDictName: '检验', isActive: false }, { nodeDictName: '报告', isActive: false }]);
let curreFlowNode = ref('');
/**节点点击事件 */
function itemClick(m) {
  curreFlowNode.value = m;
  processTabs.forEach((mm) => {
    if (mm.id === m.id) {
      mm.isActive = true;
    } else {
      mm.isActive = false;
    }
  });
}
const nodes = ref([
  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
  { id: '2', label: 'Node 2', position: { x: 100, y: 100 } },
  { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
  { id: '4', label: 'Node 4', position: { x: 400, y: 200 } },
])

const edges = ref([
  { id: 'e1-2', source: '1', target: '2', animated: true },
  { id: 'e1-3', source: '1', target: '3' },
])
</script>
<style lang="scss" scoped>
/* import the required styles */
@import '@vue-flow/core/dist/style.css';

/* import the default theme (optional) */
@import '@vue-flow/core/dist/theme-default.css';
#specclosedloop {
  height: 100%;
}

.my-flow {
  margin: 10px;
  height: 400px;

  :deep(.node-light) {
    background: none;
  }
  :deep(.node-dark) {
    background: #eeeeee;
  }
}
</style>
